<template>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="gray">
    <van-swipe-item v-for="item in theImg" :key="item.id">
        <img class="img" :src="item.src" alt="">
    </van-swipe-item>
    </van-swipe>
</template>

<script>
export default {
  props: {
    theImg: {
      type: [Object, Array],
      require: true
    }
  }
}
</script>

<style lang="less" scope>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 300px;
    text-align: center;
    height: 300px;
    border: none;
    .img {
        width: 100%;
        height: 300px;
        background-size: cover;
    }
  }
    .van-swipe__indicators {
        height: 20px;
        // background-color: #ccc;
        opacity: 0.7;
        border-radius: 5px;
        display: flex;
        .van-swipe__indicator {
            font-size: 10px;
            line-height: 20px;
            align-self: center;
        }
    }
</style>
